<template>
	<view>
    <uni-nav-bar left-text="logo" right-text="扫一扫" title="首页" @clickRight="scan"></uni-nav-bar>
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="item of bannerlist" :key = "item.bannerid">
          <image  :src="item.img" mode="widthFix"></image>
      </swiper-item>
     
    </swiper>
    
		<uni-grid :column="4">
		    <uni-grid-item>
		        <text class="text">文本</text>
		    </uni-grid-item>
		    <uni-grid-item>
		        <text class="text">文本</text>
		    </uni-grid-item>
		    <uni-grid-item>
		        <text class="text">文本</text>
		    </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
		</uni-grid>
    <Button @click="call">打电话</Button>
	</view>
</template>

<script>
  const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
  import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
  import uniGrid from "@/components/uni-grid/uni-grid.vue"
  import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	export default {
    components: {uniGrid,uniGridItem, uniNavBar},
		data() {
			return {
				bannerlist: []
			}
		},
    mounted () {
      uni.request({
        url: 'http://nz1908.wudaxun.top/api/banner',
        success: (res) => {
          console.log(res.data)
          this.bannerlist = res.data.data
        }
      })
    },
		methods: {
      call () {
        // uni.makePhoneCall({
        //     phoneNumber: '10086' //仅为示例
        // });
        // uni.chooseImage({
        //     count: 6, //默认9
        //     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        //     sourceType: ['album'], //从相册选择
        //     success: function (res) {
        //         console.log(JSON.stringify(res.tempFilePaths));
        //     }
        // });
        dcRichAlert.show({
             position: 'bottom',
             title: "提示信息",
             titleColor: '#FF0000',
             content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
             contentAlign: 'left',
             checkBox: {
                 title: '不再提示',
                 isSelected: true
             },
             buttons: [{
                 title: '取消'
             }, {
                 title: '否'
             }, {
                 title: '确认',
                 titleColor: '#3F51B5'
             }]
        }, result => {
             console.log(result)
        });
      },
      scan () {
        console.log('扫一扫')
        uni.scanCode({
            success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
            }
        });
      }
		}
	}
</script>

<style>
.swiper image {
  width: 100%;
}
.uni-navbar {
  height: 44px;
}
</style>
